<script lang="ts" setup>
import { useDrawerStore } from '../store/drawer';
import { ref, onMounted, onUnmounted } from 'vue'
import provenanceSourceDetail from './list/provenanceSourceDetail.vue';
import { useProvenceSourceStore } from '../store/provenanceSourceDialog';
import provenanceSource from '../api/provenanceSource';
const emit = defineEmits(['update:drawer'])
const provenceSourceStore = useProvenceSourceStore()
const drawerStore = useDrawerStore()
// 状态颜色映射
const preservationStatusColor = {
    '完好': 'success',
    '轻微损伤': 'warning',
    '严重损伤': 'danger',
    '修复中': 'info',
}

const collectionStatusColor = {
    '在库': 'primary',
    '展出': 'success',
    '外借': 'warning',
    '修复中': 'info',
    '已注销': 'danger'
}
const windowWidth = ref(window.innerWidth);
const updateWindowWidth = () => {
    windowWidth.value = window.innerWidth;
};
async function seeProvenanceSource() {
    provenceSourceStore.changeOpen()
    await provenanceSource.getProvenanceSourceById(drawerStore.container.id).then(res => {
        provenceSourceStore.data=res.data.data
    })
}
onMounted(() => {
    window.addEventListener('resize', updateWindowWidth);
});

onUnmounted(() => {
    window.removeEventListener('resize', updateWindowWidth);
});
</script>
<template>
    <el-drawer v-model="drawerStore.drawer" direction="rtl" size="40%" class="collection-drawer" :with-header="false">
        <div class="drawer-content">
            <!-- 图片展示区 -->
            <div class="image-section">
                <el-image style="width: 60%; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1)"
                    :src="drawerStore.container.img || 'https://via.placeholder.com/300x200?text=暂无图片'"
                    :preview-src-list="[drawerStore.container.img]" fit="scale-down" :max-height="360"
                    :min-height="120">
                    <template #error>
                        <div class="image-error">
                            <el-icon>
                                <Picture />
                            </el-icon>
                            <span>暂无图片</span>
                        </div>
                    </template>
                </el-image>
            </div>
            <!-- 信息展示区 -->
            <el-descriptions border :column="2" direction="vertical" title="藏品详细信息" class="info-container">
                <!-- 基础信息 -->
                <el-descriptions-item label="馆内编号" label-class-name="info-label">
                    <span class="info-value">{{ drawerStore.container.internalId }}</span>
                </el-descriptions-item>

                <el-descriptions-item label="藏品名称">
                    <span class="info-value highlight">{{ drawerStore.container.name }}</span>
                </el-descriptions-item>

                <el-descriptions-item label="藏品别名">
                    <span class="info-value">{{ drawerStore.container.alternateName || '-' }}</span>
                </el-descriptions-item>

                <!-- 分类信息 -->
                <el-descriptions-item label="分类与年代" :span="2">
                    <div class="category-info">
                        <el-tag type="info" size="small">分类: {{ drawerStore.container.subcategory }}</el-tag>
                        <el-tag type="warning" size="small">年代: {{ drawerStore.container.period }}</el-tag>
                    </div>
                </el-descriptions-item>

                <!-- 状态信息 -->
                <el-descriptions-item label="保存状态">
                    <el-tag :type="preservationStatusColor[drawerStore.container.preservationStatus || '']"
                        effect="dark">
                        {{ drawerStore.container.preservationStatus }}
                    </el-tag>
                </el-descriptions-item>

                <el-descriptions-item label="当前状态">
                    <el-tag :type="collectionStatusColor[drawerStore.container.status || '']" effect="dark">
                        {{ drawerStore.container.status }}
                    </el-tag>
                </el-descriptions-item>

                <el-descriptions-item label="重量">
                    <span class="info-value">
                        {{ drawerStore.container.weight ? `${drawerStore.container.weight} kg` : '-' }}
                    </span>
                </el-descriptions-item>

                <!-- 位置信息 -->
                <el-descriptions-item label="存放位置" :span="2">
                    <div class="location">
                        <el-icon>
                            <Location />
                        </el-icon>
                        <span class="info-value">{{ drawerStore.container.currentLocation || '未记录位置' }}</span>
                    </div>
                </el-descriptions-item>

                <!-- 时间信息 -->
                <el-descriptions-item label="入藏时间" :span="2">
                    <time class="time-info">
                        {{ drawerStore.container.acquisitionDate || null }}
                    </time>
                </el-descriptions-item>

                <!-- 详细描述 -->
                <el-descriptions-item label="详细描述" :span="2">
                    <div class="description">
                        {{ drawerStore.container.description || '暂无详细描述' }}
                    </div>
                </el-descriptions-item>
                <!-- 在 <el-descriptions> 底部添加 -->
                <el-descriptions-item :span="2">
                    <el-button type="primary" @click="seeProvenanceSource" class="source-info-btn">
                        查看藏品来源信息
                    </el-button>
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </el-drawer>
    <provenanceSourceDetail />
</template>
<style scoped>
/* 基础抽屉样式 */
.collection-drawer,
.detail-drawer {
    --label-width: 120px;
    --content-width: calc(100% - var(--label-width));
    --info-color: #2c3e50;
    --text-color: #4a5568;
    --border-color: #e4e7ed;
}

/* 信息容器统一样式 */
:deep(.el-descriptions) {
    table-layout: fixed !important;
    width: 100%;

    /* 标题样式 */
    .el-descriptions__title {
        font-size: 18px;
        color: var(--info-color);
        font-weight: 600;
        padding-bottom: 16px;
        margin-bottom: 20px;
        border-bottom: 2px solid var(--border-color);
    }

    /* 标签单元格 */
    .el-descriptions__label {
        width: var(--label-width) !important;
        min-width: var(--label-width) !important;
        max-width: var(--label-width) !important;
        background: #f8fafc !important;
        color: var(--info-color) !important;
        font-weight: 500;
        padding-left: 24px !important;
        border-right: 2px solid var(--border-color) !important;
    }

    /* 内容单元格 */
    .el-descriptions__content {
        width: var(--content-width) !important;
        min-height: 40px;
        padding: 12px 24px !important;
        color: var(--text-color);
        overflow: hidden;
    }
}

/* 主抽屉优化 */
.collection-drawer {
    .drawer-content {
        padding: 24px;

        /* 图片区域 */
        .image-section {
            margin-bottom: 32px;
            text-align: center;

            .el-image {
                transition: transform 0.3s ease;

                &:hover {
                    transform: scale(1.02);
                }
            }
        }

        /* 分类标签 */
        .category-info {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;

            .el-tag {
                border-radius: 16px;
                padding: 0 12px;
            }
        }

        /* 位置信息 */
        .location {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-color);

            .el-icon {
                color: #718096;
                font-size: 18px;
            }
        }

        /* 详细描述 */
        .description {
            max-height: 200px;
            overflow: auto;
            padding: 16px;
            background: #f8f9fa;
            border-radius: 8px;
            line-height: 1.8;
            font-size: 14px;
            white-space: pre-wrap;
            word-break: break-word;

            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background: #c0c4cc;
                border-radius: 4px;
            }
        }

        /* 查看来源按钮 */
        .source-info-btn {
            width: 100%;
            height: 48px;
            font-size: 15px;
            transition: all 0.3s ease;

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
            }
        }
    }
}

/* 来源抽屉优化 */
.detail-drawer {
    :deep(.el-drawer__body) {
        padding: 0;
        background: #f8fafc;
    }

    .header-section {
        padding: 24px;
        background: #fff;

        .title {
            margin: 0;
            font-size: 18px;
            color: var(--info-color);
            position: relative;
            padding-left: 12px;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 4px;
                height: 18px;
                background: #409eff;
                border-radius: 2px;
            }
        }

        .el-divider {
            margin: 16px 0;
            background-color: var(--border-color);
        }
    }

    /* 详细来源样式 */
    .enhanced-info {
        padding: 0 24px 24px;

        .detail-content {
            width: 100% !important;
            font-size: 14px;
            line-height: 1.8;

            &.time {
                color: #409eff;
                font-weight: 500;
                padding: 6px 12px;
                background: #ebf5ff;
                border-radius: 6px;
                display: inline-block;
            }

            &.certificate {
                display: flex;
                align-items: center;
                gap: 8px;
                color: #67c23a;

                .el-icon {
                    font-size: 18px;
                }
            }

            &.description {
                :deep(.el-scrollbar__view) {
                    padding: 12px;
                    white-space: pre-wrap;
                    word-break: break-word;
                }

                &::-webkit-scrollbar {
                    width: 6px;
                }
            }
        }
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    :deep(.el-descriptions) {
        --label-width: 100px;

        .el-descriptions__content {
            padding: 12px !important;
        }
    }

    .collection-drawer .drawer-content {
        padding: 16px;

        .description {
            max-height: 150px;
        }
    }

    .detail-drawer {
        .header-section {
            padding: 16px;
        }

        .enhanced-info {
            padding: 0 16px 16px;
        }
    }
}
</style>
